/******************** 变量 ********************/
$lv-slider-text-color: $text-color !default;

$lv-slider-track-bg-color: $primary-color !default;
$lv-slider-handle-color: $primary-color !default;
$lv-slider-on-disabled-bg-color: $border-color-secondary !default;

$slider-space: $space-base;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-slider-content {
  position: relative;
  width: 100%;
  height: $slider-space;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family;
  color: $lv-slider-text-color;
  .slider-tooltip {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
  }
}
.lv-slider-content-horizontal {
  .slider-tooltip {
    top: 50%;
    transform: translateY(-50%);
    margin-top: -$margin-xs;
  }
}
.lv-slider-content-vertical {
  height: 100%;
  width: $slider-space;
  .slider-tooltip {
    left: 50%;
    transform: translateX(-50%);
    margin-left: -$margin-xs;
  }
}
.lv-slider-rail {
  background-color: $slider-normal-bg-color;
  border-radius: 0.05rem;
  width: 100%;
  height: $slider-space;
  &:not(.lv-slider-rail-disable):hover {
    background-color: $slider-rail-hover-bg-color;
    transition: background-color 0.3s;
    cursor: pointer;
    .lv-slider-track {
      background-color: $slider-active-color;
    }
  }
}
.lv-slider-rail-vertical {
  width: $slider-space;
  height: 100%;
}

.lv-slider-cell {
  background-color: $slider-normal-bg-color;
  position: absolute;
  z-index: 3;
  top: 0;
  width: 0.02rem;
  height: 0.05rem;
}
.lv-slider-cell-vertical {
  height: 0.02rem;
  width: $slider-space;
  left: 0.02rem;
  top: unset;
}
// 区间line
.lv-slider-range-lines {
  height: 100%;
  border-radius: $border-radius-base;
  > span {
    position: absolute;
    z-index: 2;
    display: block;
  }
}
.lv-slider-range-lines-horizontal {
  height: $slider-space;
}
.lv-slider-range-lines-vertical {
  width: 0.02rem;
}
// 区间point
.lv-slider-range-points {
  .lv-mark-point {
    display: block;
    width: $slider-space * 2;
    height: $slider-space * 2;
    border-radius: 50%;
    background: $slider-handle-bg-color;
    border-width: $border-width-base;
    border-style: $border-style-base;
    border-color: $slider-normal-bg-color;
    position: absolute;
    z-index: 4;
  }
  .lv-mark-point-range-select {
    border-color: $lv-slider-handle-color;
    z-index: 6;
  }
  .lv-mark-point-horizontal {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .lv-mark-point-vertical {
    left: 50%;
    transform: translateX(-50%);
    margin-left: -0.03rem;
  }
  .lv-mark-text {
    font-size: $font-size-sm;
    color: $lv-slider-text-color;
    position: absolute;
    white-space: nowrap;
  }
  .lv-mark-text-horizontal {
    top: 50%;
    margin-top: 0.05rem;
    transform: translateX(-50%);
  }
  .lv-mark-text-vertical {
    left: 1em;
    margin-bottom: -50%;
  }
}
// 滑块
.lv-slider-handle {
  position: absolute;
  z-index: 6;
  width: $slider-space * 3;
  height: $slider-space * 3;
  cursor: pointer;
  transition: none 0s ease 0s;
  border-width: $border-width-base * 2;
  border-style: $border-style-base;
  border-color: $lv-slider-handle-color;
  border-radius: 50%;
  background-color: $slider-handle-bg-color;
  &:hover:not(.lv-slider-handle-disable),
  &.dragging {
    margin-left: -0.05rem;
    width: $slider-space * 4;
    height: $slider-space * 4;
    border-color: $slider-active-color;
    cursor: pointer;
  }
  &:focus {
    outline: 0;
  }

  display: flex;
  justify-content: center;
  white-space: nowrap;
  .lv-tooltip-text-horizontal {
    position: absolute;
    top: -0.26rem;
  }
  .lv-tooltip-text-vertical {
    position: absolute;
    left: $slider-space * 5;
    top: -0.05rem;
  }
  .lv-handle-icon {
    width: 100%;
    height: 100%;
  }
}
.lv-slider-handle-horizontal {
  top: 50%;
  transform: translateY(-50%);
  margin-left: -0.03rem;
  margin-right: -0.03rem;
}
.lv-slider-handle-vertical {
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-top: -0.03rem;
  margin-bottom: -0.03rem;
  &:hover:not(.lv-slider-handle-disable),
  &.dragging {
    margin-left: 0;
  }
}
.lv-slider-handle-disable {
  cursor: not-allowed;
  border-color: $lv-slider-on-disabled-bg-color;
  &:focus,
  &:hover {
    box-shadow: none;
    border-color: $lv-slider-on-disabled-bg-color;
  }
}
// 滑条
.lv-slider-track {
  position: absolute;
  background-color: $lv-slider-track-bg-color;
  z-index: 5;
  transition: none 0s ease 0s;
  border-radius: $border-radius-base;
}
.lv-slider-track-horizontal {
  top: 0;
  height: $slider-space;
}
.lv-slider-track-vertical {
  bottom: 0;
  width: $slider-space;
  left: 0;
}
.lv-slider-track-disable {
  background-color: $slider-track-disabled-bg-color;
}

.lv-slider-tooltip-offset {
  transform: translateY(-0.01rem) !important;
}
